<template>
	<view class="gride-container" :class="[options.display]">
		<uni-grid :column="options.column" :showBorder="false" :square="false">
			<uni-grid-item v-for="(gi,ind3) in items" :key="ind3">
				<view class="ti-flex flex-column " @click="navTo(gi.open_url)">
					<image :src="gi.src | thumbImg(imageFilter)" mode="aspectFill" class="image-width-84"
						:style="imageStyle"></image>
					<text v-if="gi.text" class="font-24 padding-bottom-18 padding-top-8">{{gi.text}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>
<script>
	/**
	 * tab性质的页面
	 */
	export default {
		data() {
			return {
				current: 0,
				dataList: [],
				options: {
					display: "",
					title: "",
					image_style: "",
					width: 80,
					height: 80,
					column: 5,
				}
			}
		},
		props: {
			configs: {
				type: Object,
				default: () => {
					return {
						column: 4,
					}
				}
			},
			items: {
				type: Array,
				default: () => {
					//静态显示
					return []
				}
			}
		},
		watch: {
			configs(newVal) {
				this.options = Object.assign(this.options, {
					...newVal
				})
			},
			items(newVal) {
				console.log("watch items", newVal)
			}
		},
		computed: {
			imageFilter() {
				//每一个的宽度
				let width = parseInt((750 - 44) / this.options.column);
				let height = parseInt(this.options.height * width / this.options.width);
				return `${width}x${height}`
			},
			imageStyle() {
				//每一个的宽度
				let width = parseInt((750 - 44) / this.options.column);
				let height = this.options.height * width / this.options.width;
				return `width: ${width}rpx;height:${height}rpx;display: block;${this.options.image_style}`
			}
		},
		created() {
			this.options = Object.assign(this.options, {
				...this.configs
			})
			if (this.options.column > this.items.length) {
				this.options.column = this.items.length;
			}
			console.log("this.items gride", this.items, this.options)
		},
		methods: {}
	}
</script>
<style lang="scss">
	.gride-container {
		background: $uni-bg-color;
		margin: $uni-spacing-row-base 22rpx 0;
		// padding-top: 8rpx;
		border-radius: $uni-border-radius-base;

		&.full {
			margin: 0;
			border-radius: 0;
		}
	}
</style>
